<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/revenueReport'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="年份：">
                        <el-date-picker v-model="paging.year" type="year" placeholder="选择年" format="yyyy"
                            value-format="yyyy" :clearable="false"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="search" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button style="margin-left:auto;">导出</el-button>
                </div> -->
                <h3 style="color: #5dcdf9">营收利润</h3>
                <div class="flex">
                    <div style="width: 50%">
                        <div id="main" style="width: 100%; height: 450px"></div>
                    </div>
                    <div style="width: 50%; position: relative">
                        <div class="shu"></div>
                        <el-table v-loading="loading" :data="tableData"
                            :header-cell-style="{ background: '#2bbdf7', color: '#fff' }"
                            header-row-class-name="has-gutter-table" style="width: 100%" border show-summary
                            :row-style="{ height: 0 + 'px' }" :cell-style="{ padding: 5 + 'px' }"
                            :summary-method="getSummaries">
                            <el-table-column prop="time" label="时间" align="center">
                                <template slot-scope="scope">
                                    <div style="color: #2bbdf7">{{ scope.row.time }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="income" label="收入" align="center"></el-table-column>
                            <el-table-column prop="expenditure_all" label="支出" align="center"></el-table-column>
                            <el-table-column prop="profit" label="利润" align="center"></el-table-column>
                            <el-table-column label="同比" align="center">
                                <template slot-scope="scope">
                                    <div :style="scope.row.syn < 0 ? 'color:red' : 'color:#2bbdf7'">{{ scope.row.syn }}%
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="环比" align="center">
                                <template slot-scope="scope">
                                    <div :style="scope.row.chain < 0 ? 'color:red' : 'color:#2bbdf7'">{{
                                        scope.row.chain
                                    }}%</div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="tip">
                            <div><span>同比：</span>同比一般情况下是今年第n月与去年第n月比，例如2017年7月份与2016年7月份相比较</div>
                            <div><span>环比：</span>是本期统计数据与上期比较，例如2017年7月份与2017年6月份相比较</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            shopList: [],
            loading: false,
            paging: {
                page: 1,
                total: 0,
                limit: 10,
                store_id: '',
                year: '',
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/revenueReport') {
            this.paging.year = this.$moment(new Date()).format('YYYY');
            this.handleCurrentChange(1);
        }
    },
    mounted() {
        setTimeout(() => {
            this.drawEcharts();
        }, 1000);
    },
    methods: {
        search() {
            this.handleCurrentChange(1);
            setTimeout(() => {
                this.drawEcharts();
            }, 300);
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (column.property == 'income' || column.property == 'expenditure_all' || column.property == 'profit') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
        async drawEcharts() {
            var echarts = require('echarts');
            let incomeList = [];
            let expenditureList = [];
            let expenditure_otherList = [];
            let salaryList = [];
            let costList = [];
            let profitList = [];
            let timeList = [];
            for (let i in this.tableData) {
                timeList.push(i * 1 + 1 + '月');
                profitList.push(this.tableData[i].profit);
                incomeList.push(this.tableData[i].income);
                expenditureList.push(this.tableData[i].expenditure);
                expenditure_otherList.push(this.tableData[i].expenditure_other);
                salaryList.push(this.tableData[i].salary);
                costList.push(this.tableData[i].cost);
            }
            if (myChart != null && myChart != '' && myChart != undefined) {
                myChart.dispose();
            }
            //基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['利润', '营业收入', '营业支出', '工资支出', '出货成本', '代垫款支出'],
                },
                xAxis: {
                    type: 'category',
                    data: timeList,
                    name: '时间',
                },
                yAxis: {
                    type: 'value',
                    name: '元',
                },
                series: [
                    {
                        name: '利润',
                        data: profitList,
                        type: 'bar',
                        stack: 'a',
                        color: '#f44447',
                    },
                    {
                        name: '营业收入',
                        data: incomeList,
                        type: 'bar',
                        stack: 'b',
                        color: '#0078ff',
                    },
                    {
                        name: '营业支出',
                        data: expenditureList,
                        type: 'bar',
                        stack: 'b',
                        color: '#f5d84f',
                    },
                    {
                        name: '工资支出',
                        data: salaryList,
                        type: 'bar',
                        stack: 'b',
                        color: '#6fd6ff',
                    },
                    {
                        name: '出货成本',
                        data: costList,
                        type: 'bar',
                        stack: 'b',
                        color: '#22c7c6',
                    },
                    {
                        name: '代垫款支出',
                        data: expenditure_otherList,
                        type: 'bar',
                        stack: 'b',
                        color: '#DA70D6',
                    },
                ],
            });
        },
        async repairGetList() {
            this.tableData = [];
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.getRevenue(obj);
            this.loading = false;
            if (code) {
                let arr = [];
                Object.keys(data).forEach((key) => {
                    arr.push(key);
                    this.tableData.push(data[key][0]);
                });
                for (let i in arr) {
                    this.$set(this.tableData[i], 'time', arr[i]);
                }
                // console.log(this.tableData);
                // this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging.year = this.$moment(new Date()).format('YYYY');
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.shu {
    position: absolute;
    width: 1px;
    height: 49px;
    background: #2bbdf7;
    right: 1px;
    z-index: 100;
}

.tip {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 5px;
    margin-top: 20px;

    div+div {
        margin-top: 10px;
    }

    span {
        font-weight: bold;
    }
}

::v-deep {
    .el-table {
        border-right: 1px solid #2bbdf7;
    }

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
        border-color: #2bbdf7;
    }

    // .el-table .el-table__cell.is-center {
    //     background-color: transparent;
    // }
    .el-table--border {
        // border-right: 0.5px solid #2bbdf7;
    }

    .el-table--border td,
    .el-table--border th {
        border-right: 1px solid #2bbdf7;
    }

    .el-table::before {
        background-color: transparent !important;
    }

    .el-table__footer-wrapper tbody td.el-table__cell,
    .el-table__header-wrapper tbody td.el-table__cell {
        background-color: transparent;
    }

    .el-table__footer {
        td:nth-child(1) {
            color: #2bbdf7;
        }

        td:nth-child(5) {
            color: #2bbdf7;
        }

        td:nth-child(6) {
            color: #2bbdf7;
        }
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTableHead {
    width: 100%;

    div {
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    td {
        border: 1px solid #ebeef5;
        text-align: center;
        height: 32px;
        color: #333333;
        padding: 0 5px;
        font-size: 14px;
    }
}
</style>
